<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <UploadExcel :on-success="getData" />
    <!-- el-upload 上传组件 -->
    <!--
      action表示上传的地址
      list-type 表示样式风格
      on-preview 预览事件(一旦配置，就出现一个加号)
      on-remove 移除事件(一旦配置，就会出现一个垃圾桶)
      name 是上传的文件字段(默认为file，具体得根据后端接口来)
      on-success 上传成功事件
      auto-upload 是否自动上传
      file-list 显示的文件内容
     -->
    <el-upload
      action="http://122.51.249.55:7005/admin/index/upload?mode=single&type=image"
      list-type="picture-card"
      name="file"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="onSuccess"
      :headers="{'Authorization':'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjE0LCJpYXQiOjE2MzkxMTc5NDksImV4cCI6MTYzOTEyNTE0OX0.FUkKwbU5nMH8e800DQTvaV1HzZUppXAwIfkpP8C7-Dk'}"
      :auto-upload="true"
      :file-list="[{name:'www.jpg',url:'http://www.itheima.com/images/logo.png'}]"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <hr>
    <ImageUpload />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    getData(result) {
      console.log(result)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      alert(11111111111)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onSuccess(response, file, fileList) {
      console.log(response) // / 读取上传成功保存的图片地址啊
      console.log(file)
      console.log(fileList)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
